<template>
    <div class="container">
        <div class="header">
            <span>{{title}}</span>
            <i class="el-icon-info"></i>
        </div>
        <div class="content">
            <slot name="content"></slot>
        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>
<script>
    import * as echarts from 'echarts';
    export default {
        name: 'searchDetail',
        props: ['title'],
        mounted() {
            var myCharts = echarts.init(this.$refs.charts)
            myCharts.setOption({
                xAxis: {
                    show: false,
                    type: 'category'
                },
                yAxis: {
                    show: false
                },
                series: [
                    {
                        name: '销量',
                        smooth: true, //将直线变为曲线
                        type: 'line',
                        data: [14, 48, 18, 32, 16, 10, 25, 12, 21],
                        // 拐点的样式
                        itemStyle: {
                            opacity: 0
                        },
                        // 线段的样式
                        lineStyle: {
                            color: '#5FA4E0'
                        },
                        // 填充的样式
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#5FA4E0' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#fff' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }

                    }
                ],

                grid: {
                    top: 0,
                    left: -30,
                    right: 0,
                    bottom: 0
                }
            })
        },
    }
</script>
<style scoped>
    .header {
        margin-top: 20px;
        color: #999;
    }

    .header i {
        margin-left: 10px;
        color: #cccccc;
    }

    .content {
        margin-top: 20px;
    }

    .content .count {
        font-size: 30px;
        color: #333;
        margin-right: 40px;
    }

    .content span {
        color: #999;
    }

    .content .el-icon-caret-bottom {
        color: rgb(255, 97, 97);
    }

    .content .el-icon-caret-top {
        color: rgb(69, 205, 71);
    }

    .charts {
        margin-top: 10px;
        width: 100%;
        height: 100px;
    }
</style>